<template>
  <div class="main_box">
    <div class="main_left">
      <div class="title_left">
        <img :src="pic.imgurl1" alt="">
        <h3
          @click="
            () => {
              $router.push('/XCTown');
            }
          "
        >
          各乡镇执行率排名
        </h3>
      </div>
      <div class="main_left_bot">
        <VEcharts
          v-if="optsLeft"
          autoresize
          :options="optsLeft"
          style="width: 100%; height: 100%"
          @click="goTown"
        />
      </div>
    </div>
    <div class="main_Mid">
      <div class="main_Mid_Top">
        <div
          v-for="(item, index) in MidTopList"
          :key="index"
          class="Mid_btn"
          @click="goProject(index, item.code)"
        >
          <p>{{ item.num }}</p>
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="main_Mid_Center" :style=" `background: url('${pic.imgurl7}') no-repeat;`">
        <div class="btn3">
          <div v-for="(item, index) in btnList" :key="index" class="btnlist">
            <img
              v-if="index === 0"
              :src="pic.imgurl2"
              alt=""
            >
            <img
              v-if="index === 1"
              :src="pic.imgurl3"
              alt=""
            >
            <img
              v-if="index === 2"
              :src="pic.imgurl4"
              alt=""
            >
            <div :class="index === 0 ? 'btn0' : index === 1 ? 'btn1' : 'btn2'">
              <span>{{ item.title }}</span>
              <p>{{ item.num }}</p>
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in iconData"
          :key="index"
          class="icon animated pulse infinite"
          :style="`left:${item.left};top:${item.top}`"
        >
          {{ item.num }}
        </div>
        <Map @town-click="townClick" />
      </div>
      <!-- <div class="main_Mid_Bot">
        <div class="title_right">
          <img src="@/assets/images/xctown/lineChart.png" alt="">
          <h3>各乡镇分月支出</h3>
        </div>
        <div class="main_zhe">
          <VEcharts
            v-if="optsMid"
            autoresize
            :options="optsMid"
            style="width: 100%; height: 100%"
          />
        </div>
      </div> -->
    </div>
    <div class="main_Right">
      <!-- <div class="main_Right_Top">
        <div
          v-for="(item, index) in RightTopList"
          :key="index"
          class="btn_Right"
          :style="`width:${item.width}`"
        >
          <p>{{ item.title }}</p>
          <span>{{ item.num }}</span>
        </div>
      </div> -->
      <div class="main_Right_Bot">
        <div class="title_table">
          <div class="title_left">
            <img :src="pic.imgurl5" alt="">
            <h3>各项目资金排名(万元)</h3>
          </div>

          <div class="list_details" @click="goMainTown">查看详情</div>
        </div>
        <div class="table_list">
          <!-- <dv-scroll-board
            :config="config"
            style="height:90%;color:rgba(0,0,0,0.85);border-radius: 8px;"
          /> -->
          <el-table
            ref="table"
            :header-cell-style="{
              color: 'rgba(0,0,0,0.85)',
              background: 'rgba(91,143,249,0.35)',
              textAlign: ' center',
              height: '50px'
            }"
            :data="tableData"
            :cell-style="{
              color: 'rgba(0,0,0,0.85)',
              textAlign: 'center',
              fontSize: '12px'
            }"
            style="width: 100%;border-radius: 8px;"
            height="93%"
            :row-class-name="tableRowClassName"
            @row-click="goTableProject"
          >
            <el-table-column prop="CPROGRAMNAME" label="项目名称" />
            <el-table-column prop="YSS" label="总预算" />
            <el-table-column prop="ZZFS" label="拨付金额" />
            <el-table-column prop="JYZJ" label="结余资金" />
          </el-table>
        </div>
      </div>
      <div class="main_Right_Bing">
        <div class="title_list">
          <img :src="pic.imgurl6" alt="">
          <h3>按项目分类</h3>
        </div>
        <div class="Bingtu">
          <VEcharts
            v-if="optsBingtu"
            autoresize
            :options="optsBingtu"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VEcharts from '@/components/vecharts';
import Map from '@/views/XCAnalysis/components/map';
import * as echarts from 'echarts/lib/echarts';
import { message } from 'ant-design-vue';
import * as apis from '@/api/dynamicInterface';
const { getQueryBodyByProduce: getQueryBodyByProduce1 } = apis;
let filterList = null;

const getQueryBodyByProduce = function(data) {
  // if (!data.doNotAddOtherFilter) {
  //   data.filterList = [...data.filterList || [], ...filterList];
  // }
  return getQueryBodyByProduce1(data).then(res => {
    if (!res.success) {
      message.warning(res.message);
    }
    return Promise.resolve(res);
  });
};
// 各乡镇执行率
const TOWNEXECUTE_MAP = {
  ZXL: 'ZXL', // 执行率
  CENTERPRISENAME: 'CENTERPRISENAME1' // 乡镇名字
};

// 各乡镇分月支出
const TOWNSEXPEND_MAP = {
  YSS: 'YSS', // 预算数
  IMONTH: 'IMONTH' // 月份
};

// 全县统计
const TOWNCOUNT_MAP = {
  YSS: 'YSS', // 总预算数
  ZXL: 'ZXL', // 执行率
  ZZFS: 'ZZFS' // 总支付数
};

// 资金汇总统计
const SUMMARYMONEYCOUNT = {
  CPROGRAMTYPENAME: 'CPROGRAMTYPENAME', // 乡镇名
  COUNT: 'COUNT', // 统计数
  CPROGRAMTYPECODE: 'CPROGRAMTYPECODE'
};

export default {
  components: {
    VEcharts,
    Map
  },
  data() {
    return {
      townExecuteRate: {
        towns: [],
        rates: []
      },

      TownsExpendMonthly: {
        month: [],
        data: []
      },

      MidTopList: [
        {
          title: '总预算数',
          num: '108',
          code: ''
        },
        {
          title: '总支付数',
          num: '108',
          code: ''
        },
        {
          title: '执行率',
          num: '108',
          code: ''
        },
        {
          title: '人员类支出',
          num: '-',
          code: ''
        },
        {
          title: '专项支出',
          num: '-',
          code: ''
        },
        {
          title: '商品和服务支出',
          num: '-',
          code: ''
        },
        {
          title: '预算管理',
          num: '-',
          code: ''
        },
        {
          title: '专户管理',
          num: '-',
          code: ''
        },
        {
          title: '核算其他',
          num: '-',
          code: ''
        }
      ],
      RightTopList: [
        {
          title: '',
          num: ''
        },
        {
          title: '',
          num: ''
        },
        {
          title: '',
          num: ''
        }
      ],
      btnList: [
        {
          title: '蓝色预警:',
          num: 3
        },
        {
          title: '橙色预警:',
          num: 0
        },
        {
          title: '红色预警:',
          num: 0
        }
      ],
      iconData: [
        { name: '镜岭镇', num: 0, left: '23.6%', top: '52%' },
        { name: '回山镇', num: 0, left: '32%', top: '70%' },
        { name: '东茗乡', num: 2, left: '34%', top: '36%' },
        { name: '澄潭街道', num: 3, left: '28%', top: '25%' },
        { name: '城南乡', num: 3, left: '39%', top: '42%' },
        { name: '沃洲镇', num: 0, left: '58%', top: '26%' },
        { name: '七星街道', num: 0, left: '37.5%', top: '12%' },
        { name: '南明街道', num: 0, left: '45.4%', top: '27.8%' },
        { name: '小将镇', num: 0, left: '64.5%', top: '42%' },
        { name: '沙溪镇', num: 0, left: '69.9%', top: '15.5%' },
        { name: '儒岙镇', num: 0, left: '47%', top: '58%' },
        { name: '羽林街道', num: 0, left: '48%', top: '16%' }
      ],
      config: {},
      leftList: {},
      leftListFu: {},
      MidZhe: {},
      timer: null,
      optionList: [],
      tableData: [],
      BingTuList: [],
      pic: {
        imgurl1: require('@/assets/images/xctown/lineChart.png'),
        imgurl2: require('@/assets/images/fullscreen/财政补助.png'),
        imgurl3: require('@/assets/images/fullscreen/财政补助 (1).png'),
        imgurl4: require('@/assets/images/fullscreen/财政补助 (2).png'),
        imgurl5: require('@/assets/img/homwAnalyse/bar chart.png'),
        imgurl6: require('@/assets/img/townPreview/bar chart.png'),
        imgurl7: require('@/assets/images/xctown/地图背景.png')
      }
    };
  },
  computed: {
    optsLeft() {
      // 各乡镇执行率排名
      const newArr = {
        color: ['rgba(91,143,249,0.85)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   // orient: 'vertical',
        //   data: ['支出', '收入'],
        //   left: '5%',
        //   top: '0%',
        //   textStyle: {
        //     // 图例文字的样式
        //     color: '#ffffff;',
        //     fontSize: 12
        //   }
        // },
        grid: {
          top: '5%',
          left: '0%',
          right: '16%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          axisLabel: {
            fontSize: 16,
            rotate: 20,
            formatter: function(value) {
              let ret = '';
              const maxLength = 5; // 每项显示文字个数
              const valLength = value.length;
              const rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (let i = 0; i < rowN; i++) {
                  let temp = '';
                  const start = i * maxLength;
                  const end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp; // 凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          type: 'category',
          // C1-y
          data: this.townExecuteRate.towns,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.45)'
            }
          }
        },
        series: [
          {
            name: '执行率',
            type: 'bar',
            stack: 'total',
            barMaxWidth: '45',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#94c2fd'
                  },
                  {
                    offset: 1,
                    color: '#5b8ff9'
                  }
                ]),
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: 'rgba(91,143,249,0.85)',
                    fontSize: '15'
                  },
                  formatter: function(params) {
                    // 核心部分 formatter 可以为字符串也可以是回调
                    if (params.value) {
                      // 如果当前值存在则拼接
                      return `${params.value}%`;
                    } else {
                      // 否则返回个空
                      return '0%';
                    }
                  }
                }
              }
            },
            // C1-X
            data: this.townExecuteRate.rates
          }
        ]
      };
      return newArr;
    },
    optsMid() {
      // 各月财政补助资金对比
      const newArr1 = {
        grid: {
          left: '25px',
          right: '23px',
          bottom: '25px',
          top: '12px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.TownsExpendMonthly.month,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.45)'
            }
          }
        },
        yAxis: {
          type: 'value',
          max: 50000,
          min: 0,
          minInterval: 250,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.45)'
            }
          }
        },
        series: [
          {
            data: this.TownsExpendMonthly.data,
            type: 'line',
            areaStyle: {
              normal: {
                color: '#5b8ff9',
                opacity: '0.25'
              }
            },
            symbol: 'none',
            lineStyle: {
              color: '#5b8ff9'
            }
          }
        ]
      };
      return newArr1;
    },
    optsBingtu() {
      const newArr2 = {
        // title: {
        //   text: "税种组成",
        //   left: "center"
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '1%',
          textStyle: {
            // 图例文字的样式
            color: ' #333333',
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 12
        },
        series: [
          {
            name: '项目分类',
            type: 'pie',
            radius: '70%',
            data: this.BingTuList,
            label: {
              show: true,
              // position: "inner",
              // formatter: function(params) {
              //   return params.value;
              // },
              textStyle: {
                color: '#faad14',
                fontSize: 16
              },
              formatter: function(params) {
                return `${params.percent}%`;
              }
            },
            center: ['35%', '60%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: ['#00BFFF', '#87CEFA', '#1E90FF']
          }
        ]
      };
      return newArr2;
    },
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  created() {
    filterList = [];
    const ENTERPRISECODE = this.$route.query.ENTERPRISECODE;
    if (ENTERPRISECODE) {
      filterList.push({
        col: 'CENTERPRISECODE1',
        value: ENTERPRISECODE
      });
    }

    this.initData();
    this.getTownList();
  },
  mounted() {
    // this.timer = setInterval(() => {
    //   // this.leftList.tx=[]
    //   this.leftList.Yss = [];
    //   this.leftList.ZHS = [];
    //   this.leftList.RATE = [];
    //   // this.getleft();
    //   setTimeout(() => {
    //     this.leftList.Yss = this.leftListFu.Yss;
    //     this.leftList.ZHS = this.leftListFu.ZHS;
    //     this.leftList.RATE = this.leftListFu.RATE;
    //   }, 800);
    // }, 4000);
  },

  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer);
  },
  methods: {
    initData() {
      const {
        getTownExecuteRate,
        getAidFinancialRank,
        // getTownsExpendMonthly,
        getTownsCount,
        getSummaryMoneyCount,
        getSummaryMoneyBot
      } = this;

      getTownExecuteRate();
      getAidFinancialRank();
      // getTownsExpendMonthly();
      getTownsCount();
      getSummaryMoneyCount();
      getSummaryMoneyBot();
    },

    // 各乡镇执行率排名
    getTownExecuteRate() {
      getQueryBodyByProduce({
        tableId: 531,
        doNotAddOtherFilter: true
      }).then(res => {
        if (res.success && Array.isArray(res.data)) {
          const [townNames, townRates] = [[], []];
          res.data.forEach(item => {
            item[TOWNEXECUTE_MAP.ZXL] = Number(
              item[TOWNEXECUTE_MAP.ZXL].replace(/\%$/, '')
            );

            townNames.unshift(item[TOWNEXECUTE_MAP.CENTERPRISENAME]);
            townRates.unshift(item[TOWNEXECUTE_MAP.ZXL]);
          });

          this.townExecuteRate.towns = townNames;
          this.townExecuteRate.rates = townRates;
        }
      });
    },

    // 各乡镇分月支出
    getTownsExpendMonthly() {
      getQueryBodyByProduce({
        tableId: 534
      }).then(res => {
        if (res.success) {
          const YSS = TOWNSEXPEND_MAP.YSS;
          const IMONTH = TOWNSEXPEND_MAP.IMONTH;
          res.data.forEach(item => {
            item[YSS] = Number(item[YSS]);
            item[IMONTH] = item[IMONTH] + '月';
          });

          this.TownsExpendMonthly.month = res.data.map(item => item[IMONTH]);
          this.TownsExpendMonthly.data = res.data.map(item => item[YSS]);
        }
      });
    },

    // 全县统计
    getTownsCount() {
      getQueryBodyByProduce({
        tableId: 532
      }).then(res => {
        const data = res.data;
        if (res.success && Array.isArray(data) && data.length) {
          const dataa = data[0];
          this.MidTopList[0].num = dataa[TOWNCOUNT_MAP.YSS];
          this.MidTopList[1].num = dataa[TOWNCOUNT_MAP.ZZFS];
          this.MidTopList[2].num = dataa[TOWNCOUNT_MAP.ZXL];
        }
      });
    },

    // 资金汇总统计 c31
    getSummaryMoneyCount() {
      getQueryBodyByProduce({
        tableId: 535
      }).then(res => {
        if (res.success) {
          const count = SUMMARYMONEYCOUNT.COUNT;
          const title = SUMMARYMONEYCOUNT.CPROGRAMTYPENAME;
          const code = SUMMARYMONEYCOUNT.CPROGRAMTYPECODE;
          res.data.forEach((e, i) => {
            const content = this.MidTopList[i + 3];
            content.title = e[title];
            content.num = e[count];
            content.code = e[code];
            if (i < 3) {
              this.BingTuList.push({
                name: e[title],
                value: e[count]
              });
            }
          });
        }
      });
    },
    getSummaryMoneyBot() {
      getQueryBodyByProduce({
        tableId: 581
      }).then(res => {
        if (res.success) {
          res.data.forEach((item, i) => {
            this.MidTopList[i + 6].title = item.CRESOURCENAME;
            this.MidTopList[i + 6].num = item.COUNT;
            this.MidTopList[i + 6].code = item.CRESOURCECODE;
          });
        }
      });
    },
    // 财政补助各项目资金排名
    getAidFinancialRank() {
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 50,
        pageType: 1,
        tableId: 536
      }).then(res => {
        if (res.success) {
          // const arr = res.data.map(item => Object.values(item));
          this.getTable(res.data);
        }
      });
    },

    getLeft() {
      getQueryBodyByProduce().then(res => {
        if (res.success) {
          console.log(res);
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },

    getTable(data) {
      this.tableData = data;
      // this.config = {
      //   data,
      //   headerBGC: 'rgba(91,143,249,0.35)',
      //   columnWidth: [4500, 2000, 2000, 2000],
      //   align: ['center', 'center', 'center', 'center'],
      //   oddRowBGC: ' rgba(0,0,0,0.00)',
      //   evenRowBGC: 'rgba(91,143,249,0.10)',
      //   rowNum: 8
      //   // waitTime: 20000
      // };
    },

    // 所有乡镇数据
    getTownList() {
      getQueryBodyByProduce({
        tableId: 391,
        pageIndex: 0,
        pageSize: 100,
        pageType: 1
      }).then(res => {
        if (res.success) {
          this.optionList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 点柱状跳转到乡镇分析
    goTown(val) {
      this.goRoute('乡镇分析', val.name);
    },
    // 点map跳转到乡镇分析
    townClick(e) {
      this.goRoute('乡镇分析', e.name);
    },
    goRoute(tilte, val) {
      this.optionList.forEach(it => {
        if (it.ENTERPRISENAME === val) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    CENTERPRISECODE1: it.CENTERPRISECODE1
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },
    goRouteMid(tilte) {
      this.menuList.forEach(item => {
        if (item.meta.title === tilte) {
          if (item.children) {
            item.children.forEach(chit => {
              if (chit.meta.title === tilte) {
                const params = {
                  path: chit.path,
                  query: {
                    title: chit.meta.title,
                    menuId: chit.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: chit.isHideLeft,
                    isHideTop: chit.isHideTop
                  }
                };
                this.$router.push(params);
              } else {
                const params = {
                  path: chit.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop
                  }
                };
                this.$router.push(params);
              }
            });
          } else {
            const params = {
              path: item.path,
              query: {
                title: item.meta.title,
                menuId: item.id,
                flag: 0,
                // isShow: isShow,
                sId: 'TabsTable',
                isHideLeft: item.isHideLeft,
                isHideTop: item.isHideTop
              }
            };
            this.$router.push(params);
          }
        }
      });
    },
    goRouteMidBtn(tilte, name, code) {
      const { title } = this.$route.query;
      this.menuList.forEach(item => {
        if (item.meta.title === tilte) {
          if (item.children) {
            item.children.forEach(chit => {
              if (chit.meta.title === tilte) {
                const params = {
                  path: chit.path,
                  query: {
                    title: chit.meta.title,
                    menuId: chit.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: chit.isHideLeft,
                    isHideTop: chit.isHideTop,
                    [code]: name,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              } else {
                const params = {
                  path: chit.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    [code]: name,
                    routeTitle: title
                  }
                };
                this.$router.push(params);
              }
            });
          } else {
            const params = {
              path: item.path,
              query: {
                title: item.meta.title,
                menuId: item.id,
                flag: 0,
                // isShow: isShow,
                sId: 'TabsTable',
                isHideLeft: item.isHideLeft,
                isHideTop: item.isHideTop,
                [code]: name,
                routeTitle: title
              }
            };
            this.$router.push(params);
          }
        }
      });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'name-row';
      } else if (rowIndex % 2 === 1) {
        return 'plan-row';
      }
      return '';
    },
    goTableProject(row, ceil) {
      this.goRouteMidBtn('项目分析', row.CPROGRAMNAME, 'PROGRAMNAME');
    },
    // Mid跳往详情页
    goProject(val, code) {
      if (val <= 2) {
        this.goRouteMid('项目分析');
      } else if (val <= 5) {
        this.goRouteMidBtn('项目分析', code, 'CPROGRAMTYPECODE');
      } else {
        this.goRouteMidBtn('项目分析', code, 'CRESOURCECODE');
      }
    },

    // 查看详情跳转
    goMainTown() {
      this.goRouteMid('项目分析');
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.main_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.main_left {
  width: 24%;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
  height: 100%;
  .title_left {
    height: 7.5%;
    display: flex;
    align-items: center;
    padding-left: px2vw(25px);
    img {
      margin-right: px2vw(8px);
      vertical-align: bottom;
    }
    h3 {
      color: #333333;
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      margin: 0;
    }
  }
  .main_left_bot {
    height: 92.5%;
    padding-left: px2vw(20px);
  }
}
.main_Mid {
  width: 49%;
  height: 100%;
  .main_Mid_Top {
    height: 37.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .Mid_btn {
      width: 32%;
      height: 31%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      p {
        font-size: px2vw(36px);
        height: 50%;
        color: #576a95;
        margin: 0;
      }
      span {
        color: #999999;
        font-size: px2vw(18px);
      }
    }
  }
  .main_Mid_Center {
    height: 62.5%;

    background-size: 110% 105.5%;
    margin-left: -2%;
    position: relative;
    .btn3 {
      position: absolute;
      right: px2vw(31px);
      bottom: px2vw(31px);
      .btnlist {
        img {
          width: px2vw(30px);
          height: px2vw(30px);
          margin-right: 5px;
        }
        display: flex;
        align-items: center;
        .btn0 {
          color: #4ca7ed;
          display: flex;
          align-items: center;
        }
        .btn1 {
          color: #ff6b00;
          display: flex;
          align-items: center;
        }
        .btn2 {
          color: #d40000;
          align-items: center;

          display: flex;
        }
        span {
          font-size: px2vw(20px);
          margin-right: 5px;
        }
        p {
          font-size: px2vw(34px);
          margin-bottom: 0;
        }
      }
    }
    .icon {
      width: px2vw(31px);
      height: px2vw(31px);
      opacity: 1;
      background: rgba(136, 182, 232, 0.8);
      border: 1px solid #0169d4;
      border-radius: 50%;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      color: white;
      line-height: px2vw(31px);
      text-align: center;
      position: absolute;
      z-index: 10000;
    }
    .icon::before {
      content: "";
      display: block;
      width: px2vw(16px);
      height: px2vw(16px);
      opacity: 1;
      border-bottom: 2px solid #e9d500;
      border-left: 2px solid #e9d500;
      transform: rotate(-45deg);
      box-shadow: -2px 3px 5px -2px rgba(32, 32, 32, 0.5);
      position: absolute;
      background: transparent;
      left: 20%;
      z-index: 3;
      bottom: -30%;
    }
  }
  // .main_Mid_Bot {
  //   height: 23%;
  //   background: rgba(255, 255, 255, 0.65);
  //   border-radius: 20px;
  //   box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
  //   .title_right {
  //     height: 32%;
  //     display: flex;
  //     align-items: center;
  //     padding-left: 25px;
  //     img {
  //       margin-right: 8px;
  //       vertical-align: bottom;
  //     }
  //     h3 {
  //       color: #333333;
  //       font-size: 18px;
  //       font-family: PingFangSC, PingFangSC-Medium;
  //       font-weight: 500;
  //       margin: 0;
  //     }
  //   }
  //   .main_zhe {
  //     height: 68%;
  //   }
  // }
}
.main_Right {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // .main_Right_Top {
  //   height: 24%;
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-between;
  //   align-content: space-between;
  //   .btn_Right {
  //     background: rgba(255, 255, 255, 0.65);
  //     border-radius: 8px;
  //     box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
  //     height: 46%;
  //     p {
  //       background: rgba(255, 255, 255, 0.65);
  //       height: 35.5%;
  //       font-size: px2vw(16px);
  //       color: #333333;
  //       display: flex;
  //       padding-left: 13px;
  //       align-items: center;
  //       margin: 0;
  //     }
  //     span {
  //       height: 64.5%;
  //       font-size: px2vw(26px);
  //       color: #576a95;
  //       padding-left: 13px;
  //       display: flex;
  //       align-items: center;
  //     }
  //   }
  // }
  .main_Right_Bot {
    height: 66%;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
    .title_table {
      height: 10%;
      display: flex;
      align-items: center;
      padding: 0 px2vw(23px);
      justify-content: space-between;
      .title_left {
        display: flex;
        align-items: center;
      }
      img {
        vertical-align: middle;
      }
      h3 {
        display: inline-block;
        height: px2vw(25px);
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        line-height: px2vw(25px);
        margin-left: px2vw(4px);
        vertical-align: middle;
        color: #333333;
        margin-bottom: 0;
      }
      .list_details {
        width: px2vw(88px);
        height: px2vw(32px);
        border: 1px solid #1890ff;
        border-radius: 3px;
        text-align: center;
        line-height: px2vw(32px);
        color: #1890ff;
        font-size: px2vw(14px);
        cursor: pointer;
      }
    }
    .table_list {
      height: 90%;
      margin-top: px2vw(5px);
      padding: 5px 5px 0;
      width: 100%;
    }
  }
  .main_Right_Bing {
    height: calc(34% - 16px);
    margin-top: px2vw(16px);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
    .title_list {
      height: 18%;
      display: flex;
      align-items: center;
      padding-left: px2vw(25px);
      h3 {
        color: #333333;
        font-size: px2vw(18px);
        margin: 0;
        margin-left: px2vw(8px);
      }
    }
    .Bingtu {
      height: calc(88% - 20px);
    }
  }
}

// /deep/ .dv-scroll-board .rows .ceil {
//   width: 250px;
//   margin: 0 20px;
// }
/deep/.dv-scroll-board {
  .rows {
    .row-item {
      cursor: pointer;
      &:hover {
        background: rgba(91, 143, 249, 0.35) !important;
        border-radius: 10px 0px 0px 10px !important;
      }
    }
  }
}

/deep/.el-table .name-row {
  background: rgba(0, 0, 0, 0);
  // color: #0169d4;
}

/deep/.el-table .plan-row {
  background: rgba(91, 143, 249, 0.1);
  // color: #0169d4;
}
/deep/.el-table__body-wrapper .el-table__row {
  height: 55px;
}
/deep/.el-table .cell {
  padding: 0 !important;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border: 0;
  // border-bottom: 1px solid #32c5ff;
}
</style>
